<template>
    <div id="course">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="ActData">
                <el-form-item>
                    <el-input type="number" min="0" v-model="ActData.id" placeholder="请输入要搜索的ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="ActData.name" placeholder="请输入要搜索的标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="ActData.type" clearable placeholder="请选择">
                        <el-option label="专辑" :value="0"></el-option>
                        <el-option label="普通" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="postCourse">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--TAble-->
        <el-table :data="ActIty" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column label="课程类型">
                <template slot-scope='scope'>
                    <p v-if="scope.row.type===0">专辑课程</p>
                    <p v-else-if="scope.row.type===1">普通课程</p>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="课程名称"></el-table-column>
            <el-table-column prop="mainImg" label='课程封面'>
                <template slot-scope='scope'>
                    <img v-if="scope.row.mainImg" :src='scope.row.mainImg.path'
                         class="mainImg">
                    <span v-else>暂未有图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="teacher" label="讲师名称"></el-table-column>
            <el-table-column prop="onShelve" label="是否上下架">
                <template slot-scope="scope">
                    <el-switch on-text="" off-text="" v-model="scope.row.status" :on-value=1 :off-value=0 @change="onShelveSwitch(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleGo(scope.row)">详情</el-button>
                    <el-button size="small" @click="courseEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size"
                           :total="total" style="float:right;"></el-pagination>
        </el-col>
        <!--新增-->
        <el-dialog title="添加课程" v-model="addFormVisible" top="5%" size="large">
            <div style="width: 100%;" class="clear">
                <el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
                    <div style="width: 50%;float:left;">
                        <el-form-item label="类型" prop="type">
                            <el-radio-group v-model="addForm.type" @change="radios">
                                <el-radio :label=0>专题课程</el-radio>
                                <el-radio :label=1>普通课程</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="课程名称" prop="name">
                            <el-input v-model="addForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="课程简介" prop="description">
                            <el-input type="textarea" v-model="addForm.description" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="讲师姓名" prop="teacher">
                            <el-input v-model="addForm.teacher" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="讲师简介" prop="introduction">
                            <el-input type="textarea" v-model="addForm.introduction" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="App分享图片" prop="descImg">
                            <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                                       :show-file-list="false" :on-success="handleAvatarSuccess1"
                                       :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                                <img v-if="descImgUrl" :src="descImgUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="是否免费" prop="free">
                            <el-switch on-text="" off-text="" :on-value=1 :off-value=0 v-model="addForm.free" @change="freeProp"></el-switch>
                        </el-form-item>
                        <el-form-item label="当前价格" prop="price" v-if="addForm.free !== 1">
                            <el-input type="number" v-model="addForm.price" auto-complete="off">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="原始价格" prop="origPrice" v-if="addForm.free !== 1">
                            <el-input type="number" v-model="addForm.origPrice" auto-complete="off">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 50%;float:left;">
                        <el-form-item label="展示图片">
                            <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                                       :show-file-list="false" :on-success="handleAvatarSuccess"
                                       :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="发布日期" prop="publishDate">
                            <el-date-picker
                                    v-model="addForm.publishDate"
                                    type="datetime"
                                    placeholder="选择日期时间" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="选择类型">
                            <el-select style="width: 150px; display: inline-block" v-model="else1" placeholder="请选择" @visible-change="elseBel" @change="elseAge">
                                <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select style="width: 200px; display: inline-block" v-if="optionsd" v-model="else2" placeholder="请选择">
                                <el-option
                                        v-for="item in optionsd"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否推荐" prop="recommend">
                            <el-switch on-text="" off-text="" :on-value=1 :off-value=0 v-model="addForm.recommend" @change="recommendProp"></el-switch>
                        </el-form-item>
                        <el-form-item label="推荐到期时间" prop="recommendDate" v-if="addForm.recommend === 1">
                            <el-date-picker
                                    v-model="addForm.recommendDate"
                                    type="date"
                                    placeholder="选择日期" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--编辑-->
        <el-dialog title="编辑课程" v-model="editFormVisible" top="5%" size="large">
            <div style="width: 100%;" class="clear">
                <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
                    <div style="width: 50%;float:left;">
                        <el-form-item label="类型" prop="type">
                            <el-radio-group v-model="editForm.type" @change="radios">
                                <el-radio disabled :label=0>专题课程</el-radio>
                                <el-radio disabled :label=1>普通课程</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="课程名称" prop="name">
                            <el-input v-model="editForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="课程简介" prop="description">
                            <el-input type="textarea" v-model="editForm.description" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="讲师姓名" prop="teacher">
                            <el-input v-model="editForm.teacher" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="讲师简介" prop="introduction">
                            <el-input type="textarea" v-model="editForm.introduction" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="App分享图片" prop="descImg">
                            <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                                       :show-file-list="false" :on-success="editSuccess1"
                                       :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                                <img v-if="descImgUrls" :src="descImgUrls" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="是否免费" prop="free">
                            <el-switch on-text="" off-text="" :on-value=1 :off-value=0 v-model="editForm.free" @change="editFreeProp"></el-switch>
                        </el-form-item>
                        <el-form-item label="当前价格" prop="price" v-if="editForm.free !== 1">
                            <el-input type="number" v-model="editForm.price" auto-complete="off">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="原始价格" prop="origPrice" v-if="editForm.free !== 1">
                            <el-input type="number" v-model="editForm.origPrice" auto-complete="off">
                                <template slot="append">¥</template>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 50%;float:left;">
                        <el-form-item label="展示图片">
                            <el-upload class="avatar-uploader" :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                                       :show-file-list="false" :on-success="editSuccess"
                                       :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                                <img v-if="imageUrls" :src="imageUrls" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="发布日期" prop="publishDate">
                            <el-date-picker
                                    v-model="editForm.publishDate"
                                    type="datetime"
                                    placeholder="选择日期时间" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="选择类型">
                            <el-select style="width: 150px; display: inline-block" v-model="editForm.pclassifyId" placeholder="请选择" @visible-change="elseBels" @change="elseAge">
                                <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                            <el-select style="width: 200px; display: inline-block" v-model="editForm.classifyId" placeholder="请选择">
                                <el-option
                                        v-for="item in optionsd"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否推荐" prop="recommend">
                            <el-switch on-text="" off-text="" :on-value=1 :off-value=0 v-model="editForm.recommend" @change="editRecommendProp"></el-switch>
                        </el-form-item>
                        <el-form-item label="推荐到期时间" prop="recommendDate" v-if="editForm.recommend === 1">
                            <el-date-picker
                                    v-model="editForm.recommendDate"
                                    type="date"
                                    placeholder="选择日期" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editSubmit('editForm')" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {courseAdd,courseAudit,courseBuy,courseBuyList,courseDel,courseInfo,courseList,courseOnAndOff,courseRate,courseUpdate,marketClassifyList} from '../../api/api';
    export default {
        data() {
            return {
                else1: '',
                else2: '',
                options: [],
                optionsd: null,
                optiontr: false,
                ActIty: [],
                total: 0,
                page: 1,
                size: 5,
                ActData: {
                    id: null,
                    name: '',
                    type: 1
                },
                listLoading: false,
                /*新增界面数据*/
                addFormVisible: false,
                addLoading: false,
                addFormRules: {
                    name: { required: true, message: '请输入活动名称', trigger: 'blur' },
                    description: [
                        { required: true, message: '请填写课程简介', trigger: 'blur' },
                        { min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur' }
                    ],
                    teacher: { required: true, message: '请输入讲师姓名', trigger: 'blur' },
                    introduction: [
                        { required: true, message: '请填写讲师简介', trigger: 'blur' },
                        { min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur' }
                    ],
                    publishDate: { type: 'date', required: true, message: '请选择发布日期', trigger: 'change' }
                },
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                imageUrl: '',
                descImgUrl: '',
                addForm: {
                    type: 0,
                    name: '',
                    description: '',
                    teacher: '',
                    introduction: '',
                    free: 1,
                    price: '',
                    origPrice: '',
                    descImg: {
                        path: '',
                        remark: '',
                    },
                    mainImg: {
                        path: '',
                        remark: '',
                    },
                    publishDate: '',
                    recommend: '',
                    recommendDate: '',

                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                /*编辑*/
                editFormVisible: false,
                editLoading: false,
                editFormRules: {
                    name: { required: true, message: '请输入活动名称', trigger: 'blur' },
                    description: [
                        { required: true, message: '请填写课程简介', trigger: 'blur' },
                        { min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur' }
                    ],
                    teacher: { required: true, message: '请输入讲师姓名', trigger: 'blur' },
                    introduction: [
                        { required: true, message: '请填写讲师简介', trigger: 'blur' },
                        { min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur' }
                    ],
                    publishDate: { type: 'date', required: true, message: '请选择发布日期', trigger: 'change' },
                    price : { required: true, message: '请输入当前价格', trigger: 'blur' },
                    origPrice : { required: true, message: '请输入原始价格', trigger: 'blur' },
                    recommendDate: { type: 'date', required: true, message: '请选择发布日期', trigger: 'change' }
                },
                imageUrls: null,
                descImgUrls: null,
                editForm: {
                    type: 0,
                    name: '',
                    description: '',
                    teacher: '',
                    introduction: '',
                    free: 1,
                    price: '',
                    origPrice: '',
                    descImg: {
                        path: '',
                        remark: '',
                    },
                    mainImg: {
                        path: '',
                        remark: '',
                    },
                    publishDate: '',
                    recommend: '',
                    recommendDate: '',
                },
            }
        },
        methods: {
            /*列表获取*/
            postCourse(){
                let para = {
                    page: this.page,
                    size: this.size,
                    data: this.ActData
                };
                this.listLoading = true;
                courseList(para).then((res) => {
                    console.log(res);
                    this.listLoading = false;
                    this.ActIty = res.data.content;
                    this.total = res.data.totalElements;
                });
            },
            onShelveSwitch(row){
                let para = {
                    id: row.id,
                    status: row.status
                };
                this.listLoading = true;
                courseOnAndOff(para).then((res) => {
                    console.log(res);
                    this.listLoading = false;
                    this.postCourse()
                });
            },
            /*分页*/
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.postCourse();
            },
            /*新增*/
            handleAdd(){
                this.addFormVisible = true;
                this.imageUrl= '';
                this.descImgUrl= '';
                this.else1 = this.else2 = '';
                this.addForm= {
                    type: 0,
                    name: '',
                    description: '',
                    teacher: '',
                    introduction: '',
                    free: 1,
                    price: '',
                    origPrice: '',
                    descImg: {
                        path: '',
                        remark: '',
                    },
                    mainImg: {
                        path: '',
                        remark: '',
                    },
                    publishDate: '',
                    recommend: '',
                    recommendDate: '',
                };
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response.data.pathFull;
                this.addForm.mainImg.path = file.response.data.path;
            },
            handleAvatarSuccess1(res, file) {
                this.descImgUrl = file.response.data.pathFull;
                this.addForm.descImg.path = file.response.data.path;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            freeProp(val){
                if(val === 0){
                    this.addFormRules.price = { required: true, message: '请输入当前价格', trigger: 'blur' };
                    this.addFormRules.origPrice = { required: true, message: '请输入原始价格', trigger: 'blur' };
                }else{
                    delete this.addFormRules.price;
                    delete this.addFormRules.origPrice;
                }
            },
            recommendProp(val){
                if(val === 0){
                    delete this.addFormRules.recommendDate;
                }else{
                    this.addFormRules.recommendDate = { type: 'date', required: true, message: '请选择发布日期', trigger: 'change' };
                }
            },
            addSubmit(a){
                this.$refs[a].validate((valid) => {
                    if(this.addForm.mainImg.path === ''){this.$message({message: ' 请添加展示图片', type: 'error'});return;}
                    if(this.addForm.descImg.path === ''){this.$message({message: ' 请添加App分享图片', type: 'error'});return;}
                    if(this.else1 === ''){this.$message({message: ' 请选择类型', type: 'error'});return;}
                    if (valid){
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = this.addForm;
                            para.pclassifyId = this.else1;
                            para.classifyId = this.else2;
                            courseAdd(para).then((res) => {
                                console.log(res);
                                this.addLoading = false;
                                if(res.code !== 20000){
                                    this.$message({message: res.message, type: 'error'});
                                }else{
                                    this.$message({message: res.message, type: 'success'});
                                    this.addFormVisible = false;
                                    this.postCourse();
                                }
                            });
                        });
                    }
                });
            },
            /*详情*/
            handleGo(row){
                this.$router.push({path: '/lessons/' + row.id});
            },
            /*删除*/
            handleDel(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    courseDel(id, para).then((res) => {
                        this.listLoading = false;
                        if(res.code !== 20000){
                            this.$message({message: res.message, type: 'error'});
                        }else{
                            this.$message({message: res.message, type: 'success'});
                        }
                        this.postCourse();
                    });
                })
            },
            /*编辑课程*/
            courseEdit(row){
                let id = row.id;
                let para = {
                    vno: 'v1'
                };
                this.editFormVisible = true;
                this.optiontr = false;
                courseInfo(id,para).then(res => {
                    this.editForm = res.data;
                    console.log(res.data)
                    console.log(this.editForm)
                    this.imageUrls = res.data.mainImg.path;
                    this.descImgUrls = res.data.descImg.path;
                    this.editForm.publishDate = new Date(res.data.publishDate);
                    if(this.editForm.recommendDate !== '')
                        this.editForm.recommendDate = new Date(res.data.recommendDate);
                    if(this.editForm.free === 1){
                        delete this.editFormRules.price;
                        delete this.editFormRules.origPrice;
                    }
                    if(this.editForm.recommend === 0){
                        delete this.editFormRules.recommendDate;
                    }
                    if(this.editForm.pclassifyId===0){
                        this.editForm.pclassifyId = this.editForm.classifyId = null
                    }
                    marketClassifyList({page: 1, size: 1000, data: {id: null, name: '', type: this.editForm.type,pid:0}}).then((res) => {
                        this.options = res.data.content;
                        for (let i=0;i<this.options.length;i++){
                            if(this.options[i].id === this.editForm.pclassifyId){
                                this.optionsd = this.options[i].subClassifyList;
                            }
                        }
                    });
                });
            },
            editSuccess(res, file) {
                this.imageUrls = file.response.data.pathFull;
                this.editForm.mainImg.path = file.response.data.path;
            },
            editSuccess1(res, file) {
                this.descImgUrls = file.response.data.pathFull;
                if(typeof (this.editForm.descImg) === 'string'){this.editForm.descImg = {path: '', remark: '',}}
                this.editForm.descImg.path = file.response.data.path;
            },

            editFreeProp(val){
                if(val === 0){
                    this.editFormRules.price = { required: true, message: '请输入当前价格', trigger: 'blur' };
                    this.editFormRules.origPrice = { required: true, message: '请输入原始价格', trigger: 'blur' };
                }else{
                    delete this.editFormRules.price;
                    delete this.editFormRules.origPrice;
                }
            },
            editRecommendProp(val){
                if(val === 0){
                    delete this.editFormRules.recommendDate;
                }else{
                    this.editFormRules.recommendDate = { type: 'date', required: true, message: '请选择发布日期', trigger: 'change' };
                }
            },
            editSubmit(a){
                this.$refs[a].validate((valid) => {
                    if(this.editForm.mainImg.path === ''){this.$message({message: ' 请添加展示图片', type: 'error'});return;}
                    if(this.editForm.descImg.path === ''){this.$message({message: ' 请添加App分享图片', type: 'error'});return;}
                    if(this.editForm.pclassifyId === ''){this.$message({message: ' 请选择类型', type: 'error'});return;}
                    if (valid){
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = this.editForm;
                            delete para.isBuy;
                            delete para.buyButtonStatus;
                            courseUpdate(para).then((res) => {
                                console.log(res);
                                this.editLoading = false;
                                if(res.code !== 20000){
                                    this.$message({message: res.message, type: 'error'});
                                }else{
                                    this.$message({message: res.message, type: 'success'});
                                    this.editFormVisible = false;
                                    this.postCourse();
                                }
                            });
                        });
                    }
                });
            },
            elseBel(val){
                if(val){
                    marketClassifyList({page: 1, size: 1000, data: {id: null, name: '', type: this.addForm.type,pid:0}}).then((res) => {
                        this.options = res.data.content;
                    });
                }
            },
            elseBels(val){
                if(val){
                    marketClassifyList({page: 1, size: 1000, data: {id: null, name: '', type: this.editForm.type,pid:0}}).then((res) => {
                        this.options = res.data.content;
                    });
                }
            },
            elseAge(val){
                this.else2 = '';
                if(this.optiontr){
                    this.addForm.classifyId = '';
                    this.optiontr = true;
                }
                for (let i=0;i<this.options.length;i++){
                    if(this.options[i].id === val){
                        this.optionsd = this.options[i].subClassifyList;
                    }
                }
            },
            radios(val){
                this.else1 = this.else2 = ''
            }
        },
        mounted(){
            this.postCourse();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #course{
        .mainImg {
            width: auto;
            height: 80px;
            padding: 10px 0;
            vertical-align: middle;
        }
        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 182px;
            text-align: center;
            line-height: 1;
            &:hover {
                border-color: #20a0ff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-select{
            input{
                width: 100%;
            }
        }
    }
    .clear { clear: both; }
    .clear:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
    .clear { zoom: 1 }
</style>